<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .container{
    height: 400px;
    display: grid;
    border: 1px solid #333;
    grid-template-columns: repeat(4,100px);
    grid-template-rows: repeat(4,100px);
   
    /* gap: 1px 20px; */
  }
  .item{
    background: #f40;
    border: 1px solid #fff;
    white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
  grid-area: 2/3/4/5;
  }
</style>
<body>
  

  <div class="container">
    <div class="item">1</div>
    <!-- <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis tempora earum amet, obcaecati nihil maiores, dolores quo deserunt dolore temporibus at explicabo facilis voluptas architecto! Perspiciatis deleniti repudiandae exercitationem illum.</div>
    <div class="item">Quisquam aliquam distinctio quidem obcaecati pariatur harum eveniet? Quae, ipsam eum at est id voluptatibus soluta quos placeat magnam deleniti repudiandae. Veniam repellendus odio ut expedita laudantium minima placeat quod!</div>
    <div class="item">Esse sapiente deleniti, nemo facere ducimus dignissimos doloribus, aliquid voluptatum, temporibus sequi labore minima maiores rem repudiandae consectetur id molestiae suscipit quisquam animi eius natus nobis doloremque officia voluptas. Inventore!</div>
    <div class="item">In eveniet molestias doloribus aspernatur saepe nemo eos vel, nam porro laudantium tenetur. Nam ab, necessitatibus dignissimos, alias vitae quidem error fugiat dolor similique, deleniti laudantium provident aliquam beatae blanditiis?</div>
    <div class="item">Nemo saepe nihil impedit omnis nulla officia distinctio et officiis possimus aliquam, blanditiis vero tempora rerum suscipit iusto soluta inventore consequuntur veniam aliquid itaque ex cum explicabo tenetur! Modi, minus?</div>
    <div class="item">Eos, esse eveniet quaerat totam itaque in, eaque est distinctio quidem sit dolores excepturi vitae inventore iure omnis facilis fugiat ab labore modi minus magni, animi autem voluptas voluptates! Error.</div>
    <div class="item">Fugiat sint laudantium labore et non, delectus maiores libero eius obcaecati nostrum excepturi nihil consectetur ratione. Commodi atque quaerat delectus. Expedita nesciunt cupiditate quas excepturi neque quo rem nulla modi.</div>
    <div class="item">Minus, rerum? Animi tempore eum, sequi ea et eligendi doloribus ut non alias laborum fugiat nemo quidem qui magni sint inventore eos, facilis consectetur distinctio. Nulla quod in maxime iure.</div>
    <div class="item">Quam soluta voluptatibus pariatur consectetur quaerat dolorum, repudiandae nulla illum veniam nobis earum suscipit distinctio in voluptatum corporis ullam minus explicabo excepturi! Quod eos velit, totam ad numquam natus dolor.</div>
    <div class="item">Suscipit vel voluptates natus vero quod quisquam, repellat libero magnam, saepe dolor nemo autem corrupti amet officia, laudantium ratione voluptatem at porro. Beatae dolore eum tempora provident error? Placeat, excepturi.</div> -->
  </div>
</body>
</html>